<script setup lang="ts">
import { ref, useTemplateRef, watch } from "vue";
import PaneAccount from "@/views/login/c-cpns/PaneAccount.vue";
import PaneCode from "@/views/login/c-cpns/PaneCode.vue";
import { localCache } from "@/utils/cache";
import { LOGIN_REM_PASSWORD } from "@/constants";

const isRemPwd = ref<boolean>(localCache.getCache(LOGIN_REM_PASSWORD) ?? false);
const activeTab = ref("accountLogin");
const accountRef = useTemplateRef<InstanceType<typeof PaneAccount>>("accountRef");
watch(
  isRemPwd,
  (newValue) => {
    if (newValue) {
      localCache.setCache(LOGIN_REM_PASSWORD, true);
    } else {
      localCache.removeCache(LOGIN_REM_PASSWORD);
    }
  },
  { immediate: true }
);
const changeTab = () => {};
const handleLoginClick = () => {
  accountRef.value?.handleLogin(isRemPwd.value);
};
</script>

<template>
  <div class="login-panel">
    <h1 class="title">后台管理系统</h1>
    <el-tabs v-model="activeTab" class="tabs" @tab-click="changeTab" stretch="stretch">
      <el-tab-pane name="accountLogin">
        <template #label>
          <div class="label">
            <el-icon>
              <User />
            </el-icon>
            <span class="text">账号登录</span>
          </div>
        </template>
        <PaneAccount ref="accountRef" />
      </el-tab-pane>
      <el-tab-pane name="codeLogin">
        <template #label>
          <div class="label">
            <el-icon>
              <Lock />
            </el-icon>
            <span class="text">验证码登录</span>
          </div>
        </template>
        <PaneCode />
      </el-tab-pane>
    </el-tabs>
    <div class="controls">
      <el-checkbox v-model="isRemPwd" label="记住密码"></el-checkbox>
      <el-link type="primary">忘记密码</el-link>
    </div>
    <el-button type="primary" @click="handleLoginClick">登录</el-button>
  </div>
</template>

<style lang="less" scoped>
.login-panel {
  width: 330px;

  .title {
    text-align: center;
  }

  .tabs {
    margin-top: 8px;

    .label {
      display: flex;
      align-items: center;

      .text {
        margin-left: 8px;
      }
    }
  }

  .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-button {
    width: 100%;
    //--el-button-size: 50px; // 在 size="large" 下覆盖全局样式
  }
}
</style>
